<template>
	<view class="page_box">
		<u-form :model="form" ref="uForm">
			<view class="card u-m-b-10">
				<u-form-item label="标题" required :label-width="labelWidth" prop="title">
					<u-input v-model="form.title" />
				</u-form-item>
				<u-form-item label="查看所需积分" required :label-width="labelWidth" prop="score" :border-bottom="false">
					<u-input v-model="form.score" />
				</u-form-item>
			</view>

			<view class="card u-m-b-10">
				<view class="u-flex">
					<view class="u-m-r-20">缩略图</view>
					<text style="font-size: 24rpx;color: #707070;">注：690*300px</text>
				</view>
				<view class="u-m-t-20">
					<u-upload index='0' max-count="1" :action="action" :file-list="fileList" :show-tips="false"
						width="120" height="120" upload-text="" :custom-btn="true" @on-success="onSuccess"
						@on-remove="onRemove">
						<template #addBtn>
							<view class="upBtn">
								<u-icon name="camera" color="#757575" size="50"></u-icon>
							</view>
						</template>
					</u-upload>
				</view>
			</view>


			<view class="card u-m-b-10">
				<u-form-item label-width="0" prop="content" :border-bottom="false">
					<u-input type="textarea" :clearable="false" v-model="form.content" height="300"
						placeholder="描述下技术分析内容" />
				</u-form-item>
				<view class="u-m-t-20">
					<u-upload :max-count="10" :action="action" :file-list="fileList1" :show-tips="false"
						:multiple="true" width="108" height="108" upload-text="" :custom-btn="true"
						@on-success="onSuccess1" @on-remove="onRemove1">
						<template #addBtn>
							<view class="upBtn">
								<u-icon name="camera" color="#757575" size="50"></u-icon>
							</view>
						</template>
					</u-upload>
				</view>

			</view>
			<view class="card u-m-b-10">
				<view class="u-flex">
					<view class="u-m-r-20">视频</view>

				</view>
				<htz-image-upload  mediaType='video' :max="1" :dataType='1' v-model="ceshiData"
					:uploadSuccess="zidingyiSuccess" @imgDelete="imgDelete" :action="action"></htz-image-upload>
			</view>
		</u-form>


		<view class="footer">
			<button class="u-reset-button" @tap="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
	import {
		API_URL
	} from '@/env'
	export default {
		components: {
			htzImageUpload,
		},
		data() {
			return {
				ceshiData: [],
				action: API_URL + 'common/upload',
				fileList: [],
				fileList1: [],
				labelWidth: 180,
				form: {
					id: '',
					title: '',
					score: '',
					images: [],
					content: '',
					video: '',
					thumb: '',
				},

				rules: {
					title: [{
						required: true,
						message: '请输入标题',
						trigger: ['change', 'blur'],
					}],
					unit: [{
						required: true,
						message: '请输入积分',
						trigger: ['change', 'blur'],
					}],
					content: [{
						required: true,
						message: '请输入分享内容',
						trigger: ['change', 'blur'],
					}],
				},

				itemStyle: {
					borderBottom: '1rpx solid rgba(33, 32, 30, 0.05)',
					paddingBottom: '20rpx'
				}
			};
		},
		onLoad() {
			// this.form.id = 
			// console.log(this.$Route.query.id)
			if (this.$Route.query.id) {
				this.details()
			}


		},

		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			imgDelete(){
				console.log(66666);
				this.form.video = ''
			},
			//页面详情
			details() {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('activity.share_detail', {
					id: this.$Route.query.id
				}, '加载中...').then(res => {
					if (res.code === 1) {
						that.loadStatus = 'nomore'
						let a = res.data.images.split(',')
						console.log(a)
						this.form = {
							title: res.data.title,
							score: res.data.score,
							images: a,
							content: res.data.content,
							video: res.data.video,
							thumb: res.data.thumb,
							id: this.$Route.query.id == undefined ? 0 : this.$Route.query.id
						}
						if(res.data.thumb){
							this.fileList = [{
								url: this.$IMG_URL + res.data.thumb
							}]
						}
						
						
						this.fileList1 = a.map((val) => {
							return {
								url: this.$IMG_URL + val
							}
						})
						if(res.data.video){
							this.ceshiData = [{
								type: 1,
								url: this.$IMG_URL + res.data.video
							}]
						}
						

					}
				});
			},
			zidingyiSuccess(res) {

				var _res = JSON.parse(res.data);
				console.log(_res)

				if (_res.code == 1) {
					this.form.video = _res.data.url

					this.ceshiData = [{
						type: 1,
						url: _res.data.fullurl
					}]
				}
			},
			onRemove(index, lists) {
				console.log('图片已被移除')
				this.form.thumb = ''
			},
			onRemove1(index, lists) {
				console.log(index, lists)
				this.form.images.splice(index, 1)
			},
			onSuccess(index, lists, name) {
				// console.log('上传成功', index)
				// console.log('上传成功', lists)
				// console.log('上传成功', name)
				let a = index
				console.log(a)
				this.form.thumb = a.data.url
			},
			onSuccess1(index, lists, name) {
				let a = index
				this.form.images.push(a.data.url)
			},
			submit() {
				let that = this
				console.log(this.form);
				if(this.form.images){
					this.form.images = this.form.images.join(',')
				}
				// 
				this.$u.toast(JSON.stringify(this.form));
				this.$refs.uForm.validate()
					.then(valid => {
						if (valid) {
							console.log('所有表单项都验证通过', this.form);
							// 处理提交逻辑
							that.publish()
						}
					})
					.catch(err => {
						console.log('表单验证失败', err);
					});
			},
			publish() {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('activity.publish', that.form, '加载中...').then(res => {
					if (res.code === 1) {
						that.loadStatus = 'nomore'
						// this.$Router.push('/pages/share/result')
						uni.redirectTo({
							url:'/pages/share/result?type=jishu'
						})
					}
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.page_box {
		padding-bottom: 124rpx;
	}

	/deep/.u-form-item {
		padding: 0 !important;
	}

	.scan-btn {
		color: #fff;
		font-size: 28rpx;
		width: 510rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		margin-top: 60rpx;
		margin-right: auto;
		margin-left: auto;
		background-color: #E77817;

		/deep/.u-icon {
			margin-right: 10rpx;
		}
	}

	.u-collapse {
		.item {
			padding: 10rpx 0;
		}

		.label {
			width: 150rpx;
		}

		.text {
			width: 400rpx;
			color: #000;
		}
	}

	.upBtn {
		width: 108rpx;
		height: 108rpx;
		line-height: 108rpx;
		margin: 10rpx;
		text-align: center;
		border-radius: 20rpx;
		background-color: #F2F2F3;
	}

	.footer {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 20rpx;
		background-color: #fff;
		z-index: 1000;

		.u-reset-button {
			color: #fff;
			font-size: 28rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 20rpx;
			background-color: #E77817;
		}
	}
</style>